<template>
  <div class="nav-header">
    <div class="fold-menu">
      <el-icon :size="30" v-if="isFold" @click="change"
        ><i-ep-Expand
      /></el-icon>
      <el-icon :size="30" v-else @click="change"><i-ep-Fold /></el-icon>
    </div>
    <div class="content">
      <breadcrumb :breadcrumb="breadcrumbConfig" />
      <uerInfo />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue"
import uerInfo from "./components/userInfo.vue"
import breadcrumb from "@/base-ui/breadcrumb"
import { useRoute } from "vue-router"
import { pathMapBreadcrumb } from "@/utils/pathMapBreadcrumb"
import { mainStore } from "@/stores/modules/main"

export default defineComponent({
  components: {
    uerInfo,
    breadcrumb
  },
  emits: ["foldChange"],
  setup(props, { emit }) {
    const mainstore = mainStore()
    // 面包屑数据
    const breadcrumbConfig = computed(() => {
      const route = useRoute()
      const { oneName, twoName } = pathMapBreadcrumb(
        mainstore.menuList!,
        route.path
      )
      if (twoName) {
        return [
          {
            name: oneName
          },
          {
            name: twoName
          }
        ]
      }
      return [
        {
          name: oneName
        }
      ]
    })

    const isFold = ref(false)
    const change = () => {
      isFold.value = !isFold.value
      emit("foldChange", isFold.value)
    }
    return {
      isFold,
      breadcrumbConfig,
      change
    }
  }
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  width: 100%;
  .fold-menu {
    cursor: pointer;
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-left: 15px;
  }
}
</style>
